<template>
	<view :style="{height:allHeight+'px'}">
		<view class="nav-height">
			<view class="title-height" :style="{height:getInfo.statusHeight+'px',backgroundColor:titleColor}"></view>
			<view class="nav-content" :style="{backgroundColor:titleColor,paddingTop:(getInfo.menu.top - getInfo.statusHeight)+'px',paddingBottom:(getInfo.menu.top - getInfo.statusHeight)+'px'}">
				<view class="nav-go" :style="{height:getInfo.menu.height+'px'}">
					<view class="nav-go__nav" 
					  :style="{left:(getInfo.menu.top - getInfo.statusHeight)+'px',height:getInfo.menu.height+'px',width:getInfo.menu.width+'px'}">
					  <i class="icon size42 textColor posi" :style="{opacity:tabStyle == 0 ? '.3' : '1'}" @tap.stop="back">&#xe601;</i>
					  <text class="nav-go__xian"></text>
					  <i class="icon size48 textColor posi" @tap.stop="home">&#xe7be;</i>
					</view>
					<view class="nav-go__text size30 textCen oneover" :style="{width:textWidth+'px',height:getInfo.menu.height+'px'}">
						<text v-if="titleType" class="oneover">{{title}}</text>
						<slot name="home"></slot>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {  mapState } from 'vuex';
	export default {
		props:{
			title:{
				type:String,
				default:'页面页面页面页面页面页面页面页面'
			},
			titleType:{
				type:Boolean,
				default:true
			},
			titleColor:{
				type:String,
				default:'#f8f8f8'
			}
		},
		data(){
			return{
				statusHei:0
			}
		},
		computed:{
			...mapState({
				getInfo: ({ active }) => active.stemInfo,
			}),
			textWidth(){
				const {getInfo} = this;
				let px = uni.upx2px(750);
				let dps = (px - (getInfo.menu.width * 2)) - 30;
				return dps;
			},
			tabStyle(){
				let pages = getCurrentPages();
				let currPage = pages[pages.length - 1];
				let prevPage = pages[pages.length - 2]; //上一个页面
				let dp = prevPage ? 1 : 0;
				return dp;
			},
			allHeight(){
				const {getInfo} = this;
				let height = getInfo.menu.top + getInfo.menu.height +(getInfo.menu.top - getInfo.statusHeight);
				return height;
			}
		},
		mounted() {
			// console.log(this.getInfo)
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			home(){
				console.log(554)
				this.$openPage({
					name:'index',
					type:'reLaunch'
				})
			}
		}
	}
</script>

<style lang="less">
	.title-height{
		background-color: #F8F8F8;
	}
	.nav-content{
		background-color: #F8F8F8;
	}
	.nav-height{
		position: fixed;
		top: 0;
		width: 100%;
		left: 0;
	}
	.nav-go{
		position: relative;
		&__text{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width:200upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&__nav{
			box-sizing: border-box;
			background-color: #FFFFFF;
			position: absolute;
			top: 50%;
			transform: translate(0,-50%);
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius:64upx;
			z-index:10;
			.icon{
				width:40%;
				text-align:center;
			}
			.posi{
				position: relative;
				z-index: 10;
			}
			&::after{
				z-index: 5;
				position: absolute;
				    content: '';
				    border:1px solid #eaeaea;
				    border-radius:64upx;
				    width: 200%;
				    height: 200%;
				    top: 0;
				    left: 0;
				    transform: scale(0.5);
				    transform-origin: 0 0;
			}
		}
		&__xian{
			height:40upx;
			width:1upx;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				border-right:1px solid #eaeaea;
				width: 200%;
				height: 200%;
				top: 0;
				left: 0;
				transform: scale(0.5);
				transform-origin: 0 0;
			}
		}
	}
</style>
